import React from 'react'
import { useSelector } from 'react-redux'
import { EnvironmentOutline } from 'antd-mobile-icons'
import styles from './home.module.css'
import { CapsuleTabs } from 'antd-mobile'
import { AaOutline } from 'antd-mobile-icons'
import MyLbt from '../../components/MyLbt/index'
import {useNavigate} from 'react-router-dom'
function index() {
  const name = useSelector(store => store.home.name)
  const nav=useNavigate()
  return (
    <div className={styles.box}>
      <div className={styles.home}>
        <div className={styles.home_top}> <EnvironmentOutline /><span onClick={()=>nav('/city')}>{name}出发</span>
          <input type="text" placeholder='搜索景点' width='90%' />
          <button>搜索</button>
        </div>
        <div className={styles.home_bottom}>
          <CapsuleTabs >
            <CapsuleTabs.Tab title='丽江' key='fruits' />
            <CapsuleTabs.Tab title='成都' key='vegetables' />
            <CapsuleTabs.Tab title='哈尔滨' key='animals' />
            <CapsuleTabs.Tab title='三亚' key='fruits1' />
            <CapsuleTabs.Tab title='坝上草原' key='vegetables1' />
            <CapsuleTabs.Tab title='亲子游' key='animals1' />
            <CapsuleTabs.Tab title='西藏' key='fruits2' />
            <CapsuleTabs.Tab title='新疆' key='vegetables2' />
            <CapsuleTabs.Tab title='北京' key='animals2' />
          </CapsuleTabs>
        </div>
      </div>
      <div className={styles.home_content}>
        <div className={styles.home_content_top}>
          <div>旅游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
        </div><div className={styles.home_content_top}>
          <div>旅游</div>
          <div  className={styles.icc} onClick={()=>nav('/jqsy')}><AaOutline /><br/>景区门票</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
        </div><div className={styles.home_content_top}>
          <div>旅游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
          <div  className={styles.icc}><AaOutline /><br/>跟团游</div>
        </div>
      </div>
      <div className={styles.home_Lbt}>
        <MyLbt></MyLbt>
      </div>
      <div className={styles.home_footer}>
        <img color='res' alt="" width={'49%'} height={'200px'}/>
        <img color='res' alt="" width={'49%'} height={'200px'}/>
      </div>
    </div>
  )
}

export default index